<template>
  <div class="space-y-3">
    <h2 class="card-title text-base">基础设置</h2>
    <div class="card card-border bg-base-100 shadow-xl">
      <div class="card-body">
        <div class="flex items-center justify-between">
          <div>
            <div class="text-base font-medium">主题模式</div>
            <div class="text-sm text-gray-500 py-2">切换日间/夜晚主题</div>
          </div>
          <label class="flex cursor-pointer gap-2">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <circle cx="12" cy="12" r="5" />
              <path
                d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"
              />
            </svg>
            <input
              type="checkbox"
              :checked="isDark"
              @change="toggleTheme"
              class="toggle"
            />
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
            </svg>
          </label>
        </div>
      </div>
    </div>
    <div class="card card-border bg-base-100 shadow-xl">
      <div class="card-body">
        <div class="flex items-center justify-between">
          <div>
            <div class="text-base font-medium">音频源</div>
            <div class="text-sm text-gray-500 py-2">切换音频源</div>
          </div>
          <select class="select select-primary w-[15rem]">
            <option disabled selected>有道</option>
          </select>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useTheme } from "~/composables/common/useTheme";
const { isDark, toggleTheme } = useTheme();
</script>
